<template>
  <!-- 数据来源 -->
  <div ref="echartsRef" class="echarts"></div>
</template>
<script setup lang="ts" name="cure">
import { ref } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";

const echartsRef = ref<HTMLElement>();
const initChart = (data1: any) => {
  console.log(data1);
  let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  let option: echarts.EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      textStyle: {
        color: "#a1a1a1"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: data1.value.labels,
        axisLabel: {
          color: "#a1a1a1"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#a1a1a1"
        }
      }
    ],
    series: [
      {
        name: "送货收款",
        type: "bar",
        emphasis: {
          focus: "series"
        },
        itemStyle: {
          borderRadius: 7 // 设置圆角半径
        },
        data: data1.value.series1
      },
      {
        name: "换货",
        type: "bar",
        emphasis: {
          focus: "series"
        },
        itemStyle: {
          borderRadius: 7 // 设置圆角半径
        },
        data: data1.value.series2
      },
      {
        name: "退货",
        type: "bar",
        emphasis: {
          focus: "series"
        },
        itemStyle: {
          borderRadius: 7 // 设置圆角半径
        },
        data: data1.value.series3
      }
    ],
    color: ["#2293FB", "#58D9F9", "#FF6E76", "FFB78F", "#00CCCD"]
  };
  useEcharts(myChart, option);
};
defineExpose({
  initChart
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
